<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="../css/public.css" />
    <style>
        #content {
		width: 100%;
		height: 100vh;
		background-color: #f3f3f3;
	}

	.topAlign {
		width: 100%;
		height: 40px;
		line-height: 40px;
		text-align: center;
		background-color: #FFF;
		color: #999999;
		font-size: 13px;
	}


	.oneActive {
		font-size: 15px;
		color: #FF2265;
		font-weight: bold;
		/* border-bottom: 2px solid #FF2265; */
		position: relative;
	}


	.oneActive .line {
		width: 20px;
		height: 3px;
		background: #FF2265;
		border-radius: 2px;
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translate(-50%, 0);
	}
    </style>
</head>

<body>
    <div id="content" v-cloak>

        <header>
                <div class="topAlign flex_around">
                    <div class="one" :class="{'oneActive':index==0}" onclick="randomSwitchBtn(0)">
                        <p>首页</p>
                        <p class="line" v-if="index==0"></p>
                    </div>
                    <div class="one" :class="{'oneActive':index==1}" onclick="randomSwitchBtn(1)"><p>结算日报</p>
                        <p class="line" v-if="index==1"></p>
                    </div>
                    <div class="one" :class="{'oneActive':index==2}" onclick="randomSwitchBtn(2)"><p>成员管理</p>
                        <p class="line" v-if="index==2"></p>
                    </div>
                    <div class="one'" :class="{'oneActive':index==3}" onclick="randomSwitchBtn(3)"><p>成员收入</p>
                        <p class="line" v-if="index==3"></p>
                    </div>
                </div>
        </header>
        <!-- 脚部 -->
        <footer>
            
        </footer>
    </div>
</body>
<script src="../script/jquery.js"></script>
<script src="../script/api.js"></script>
<script src="../script/ffkj.js"></script>
<script src="../script/vue.js"></script>
<script src="../script/group.js"></script>
<script>
    var view = new Vue({
        el: '#content',
        data: {
            ios: 1, // 1上架 0非上架
            index:0
        },
        watch: {
            index: function(n, o) {
                changeWin();
            }
        }
    })
    apiready = function() {
        view.ios = $api.getStorage('shang');
        //_heibai(1)
        keyback();
        var h = 108;
        var fh = $api.offset($api.dom('footer')).h;
        var frameArr = ['daili', 'daili_ribao','daili_chengyuan','daili_shouru'];
        var pageParam = [{
            index: 0
        }, {
            t: h,
            f: fh
        }];
        groupInit('tri', frameArr, h, fh, 0, '.topAlign .one', pageParam, {
            scrollEnabled: false
        }, function(i) {
            view.index = i;
        });

    }
    function randomSwitchBtn(index) {
        view.index = index;
        api.setFrameGroupIndex({
            name: 'tri',
            index: index,
            scroll: true, //是否平滑滚动至目标窗口，即是否带有动画
            reload: false, // 刷新
        });
    }

    function changeWin() {
        if (view.index == 0) {
            api.setFrameGroupAttr({
                name: 'collect',
                hidden: true
            });
            api.setFrameAttr({
                name: 'daili',
                hidden: false
            });
        } else {
            api.setFrameAttr({
                name: 'daili',
                hidden: true
            });
            api.setFrameGroupAttr({
                name: 'collect',
                hidden: false
            });
        }
    }
    function _more() {
        _url({
            url: 'frame4/yaoqing',
            title: '我的邀请'
        })
    }
</script>

</html>